<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>文章管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form :inline="true" :model="queryInfo" style="margin-top: 10px;">
			<el-form-item label="文章名称">
				<el-input v-model="queryInfo.articleName"></el-input>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="date" type="daterange" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getarticleList()">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-button type="primary" size="small" style="margin-bottom: 20px;" @click="addArticle">新增文章</el-button>


		<el-table :data="articleList" style="width: 100%" border>
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="articleName" label="文章名称" width="180">
			</el-table-column>
			<el-table-column prop="articleIntroduce" label="简介">
			</el-table-column>
			<el-table-column prop="consult.name" label="作者">
			</el-table-column>
			<el-table-column prop="details" label="详情">
			</el-table-column>
			<el-table-column prop="articletype.name" label="文章类型">
			</el-table-column>
			<el-table-column prop="tabularChart" label="文章图片">
				<template slot-scope='scope'>
					<el-image style="width: 100px; height: 100px"
						:src="'http://121.41.0.164:8888/sfzy/downLoad?filename='+scope.row.tabularChart"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- <el-link :underline="false" type="primary" @click="ckmd(scope.row)">查看关联门店</el-link>&nbsp;&nbsp; -->
					<el-link :underline="false" type="primary"
						@click="toEditArticle(scope.row)">编辑文章</el-link>&nbsp;&nbsp;
					<el-link :underline="false" type="primary" @click="removeArticle(scope.row.id)">删除文章</el-link>
				</template>
			</el-table-column>
		</el-table>


		<!-- 分页区域 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[1,
	5, 10, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close='cancal()'>
			<el-form :model="article">
				<el-form-item label="文章名" label-width="80px">
					<el-input v-model="article.articleName" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="咨询师id" label-width="80px">
					<el-input v-model="article.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="类型id" label-width="80px">
					<el-input v-model="article.type_id" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="文章介绍" label-width="80px">
					<el-input v-model="article.articleIntroduce" autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="文章详情" label-width="80px">
					<!-- 富文本编辑器组件 -->
					<quill-editor v-model="article.details"></quill-editor>
				</el-form-item>
				<el-form-item label="文章图片" label-width="80px">

					<el-upload action="http://121.41.0.164:8888/sfzy/upload" list-type="picture-card"
						:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
						:on-remove="handleRemove" :file-list="fileList">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancal()">取 消</el-button>
				<el-button type="primary" @click="confirm()">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					articleName: '',
					pageNum: 1,
					pageSize: 5,
					startTime: '',
					endTime: ''
				},
				dialogImageUrl: '', // 预览图片路径
				dialogVisible: false, // 预览图片的对话框
				articleList: [],
				date: '',
				total: 1,
				title: '',
				dialogFormVisible: false,
				article: {
					"id": '',
					"articleName": "",
					"articleIntroduce": "",
					"tabularChart": "",
					"details": "",
					"readQuantity": 0,
					"collects": 0,
					"teacher_id": 0,
					"type_id": 0,
					"createTime": ""
				},
				fileList: [],
				artcletype: {
					name: '',
				},
			}
		},
		methods: {
			toEditArticle(row) {
				//console.log(row)
				// 赋值
				this.article = row;
				// 设置标题
				this.title = "修改文章";
				// 开启对话框
				this.dialogFormVisible = true;
				// 动态的获取图片的名称并帮到到fileList
				this.fileList = [{
					name: row.tabularChart,
					url: 'http://121.41.0.164:8888/sfzy/downLoad?filename=' + row.tabularChart
				}];
			},
			// 处理上传成功的函数
			handleSuccess(response) {
				// 把上传后的图片路径，交给文章对象的tabularChart
				this.article.tabularChart = response.message;
			},
			// 删除图片的事件
			handleRemove(file, fileList) {
				console.log(file, fileList);
				// 移除数据
				this.article.tabularChart = '';
			},
			// 预览图片事件
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			confirm() {
				if (this.article.id) {
					this.$http.put('Article', this.article)
						.then(resa => {
							if (resa.data.status == 200) {
								this.$message.success('添加成功')
								this.getarticleList()
								this.cancal()
							} else {
								this.$message.error('提交失败')
							}
						})
				} else {
					this.$http.post('Article', this.article)
						.then(resa => {
							if (resa.data.status == 200) {
								this.$message.success('提交成功')
								this.getarticleList()
								this.cancal()
							} else {
								this.$message.error('提交失败')
							}

						})
				}

			},
			cancal() {
				this.dialogFormVisible = false;
				this.article = {
					"id": '',
					"articleName": "",
					"articleIntroduce": "",
					"tabularChart": "",
					"details": "",
					"readQuantity": 0,
					"collects": 0,
					"teacher_id": 0,
					"type_id": 0,
					"createTime": ""
				}
				this.fileList = []
			},
			addArticle() {
				this.dialogFormVisible = true
				this.title = "新增文章"
			},
			removeArticle(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete('Article/delete/' + id)
						.then(res => {
							if (res.data.status == 200) {
								this.$message.success(res.data.message)
								this.getarticleList()
							} else {
								this.$message.error("删除失败")
							}
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			getarticleList() {
				this.$http.get('Article/pageSelect', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							console.log(res.data.data.list)
							this.articleList = res.data.data.list
							this.total = res.data.data.total
							console.log(this.articleList)

						} else {
							this.$message('请求异常')
						}
					})
					.catch(err => {
						this.$message.error(err)
					})
			},
			handleSizeChange(size) {
				//console.log('每页显示数量发生改变');
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				// 重新查询
				this.getarticleList()
			},
			handleCurrentChange(num) {
				//console.log('页码发生改变');
				this.queryInfo.pageNum = num;
				// 重新查询
				this.getarticleList()
			}
		},
		mounted() {
			this.getarticleList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
		}
	}
</script>

<style>
	.ql-container {
		min-height: 200px;
	}
</style>